<template>
  <div class="page">
    <div class="pageTitle">{{ title }}</div>
    <div class="content">
      <div
        v-for="(item, index) of childrenRoute"
        :key="index"
        class="smallDiv"
        align="center"
        @click="routerPush(item)"
      >
        <img :src="require('@/assets/img/' + item.name + '.png')" class="imgCSS" />
        <div class="divTitle">{{ item.meta.title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PageIndex',
  data() {
    return {
      title: '',
      nowRouteName: '',
      routerArray: [],
      childrenRoute: []
    }
  },
  watch: {
    $route() {
      this.init()
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    routerPush(item) {
      this.$router.push(item.path)
    },
    clean() {
      this.title = ''
      this.nowRouteName = ''
      this.routerArray = []
      this.childrenRoute = []
    },
    init() {
      this.clean()
      this.nowRouteName = this.$route.query.name
      if (!this.nowRouteName) {
        this.$router.push('/dashboard')
      }
      this.routerArray = JSON.parse(window.localStorage.getItem('dpagmRouter'))
      for (const item of this.routerArray) {
        if (item.name === this.nowRouteName) {
          this.title = item.meta.title
          if (Object.prototype.hasOwnProperty.call(item, 'children')) {
            this.getChildrenRoute(this.childrenRoute, item, 'children')
          }
        }
      }
    },
    // 递归找出子数组
    getChildrenRoute(data, sourseData, key) {
      for (const item of sourseData[key]) {
        item.path = sourseData.path + '/' + item.path
        if (Object.prototype.hasOwnProperty.call(item, key)) {
          this.getChildrenRoute(data, item, key)
        } else {
          data.push(item)
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.page {
  padding: 37px 58px;
  height: 100%;
  .content {
    height: calc(100% - 73px);
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
  }
}

.pageTitle {
  font-size: 22px;
  font-weight: 600;
  color: #333333;
  line-height: 18px;
  margin-bottom: 55px;
}

.smallDiv {
  cursor: pointer;
  display: inline-block;
  margin-right: 15%;
  margin-bottom: 10px;
  height: 132px;
  width: 143px;
  padding-top: 25px;
  border-radius: 4px;
  border: 1px solid #dcdcdc;
  .imgCSS {
    display: block;
    margin-bottom: 20px;
  }
  .divTitle {
    font-size: 14px;
    color: #595959;
    line-height: 20px;
  }
}
</style>
